<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
<!--文本    -->
<input type="text" v-model="name" >
<h3>name is{{name}}</h3>
<!--多行文本-->
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea><br>
<!--    多个复选框，绑定到同一个数组-->
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span><br>

    <!-- 单选按钮-->
    <input type="radio" id="one" value="One" v-model="picked">
    <label for="one">One</label>
    <br>
    <input type="radio" id="two" value="Two" v-model="picked">
    <label for="two">Two</label>
    <br>
    <span>Picked: {{ picked }}</span><br>
<!--选择框  单选-->
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span><br>

    <!--选择框  多选-->
    <select v-model="selected2" multiple style="width: 50px;">
        <option>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
        <option>E</option>
        <option>F</option>
        <option>H</option>
    </select>
    <br>
    <span>Selected: {{ selected2 }}</span>

</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    var vm = new Vue({
        el:"#app",     //  elment 缩写：元素  绑定的是id属性值为app的页面元素 ,对象作用范围是在当前绑定元素下
        data:{          //data属性，是一个数据对象 {}
            name:"hello app2",
            num: 10,
            code: "<h1>大家好，我是峰哥</h1>",
            message:"hello",
            checkedNames:[],
            picked:"",
            selected:"",
            selected2:[]
        },


    })
</script>
</html>